<template>
	<el-dropdown @command="handleCommand">
		<el-button type="primary">
			添加 <i class="el-icon-arrow-down el-icon--right"></i>
		</el-button>
		<el-dropdown-menu slot="dropdown">
			<el-dropdown-item command="new-room">添加聊天室</el-dropdown-item>
			<el-dropdown-item command="new-ai-chat">添加AI对话</el-dropdown-item>
		</el-dropdown-menu>
	</el-dropdown>
</template>

<script>
export default {
	methods: {
		handleCommand(command) {
			if (command === 'new-room') {
				this.createChatRoom();
			} else if (command === 'new-ai-chat') {
				this.createAIChat();
			}
		},
		createChatRoom() {
			// 弹出对话框让用户输入聊天室名称和描述
			this.$prompt('请输入聊天室名称和描述，用逗号分隔', '添加聊天室', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				inputPattern: /.+,.+/,
				inputErrorMessage: '格式错误，正确格式：名称,描述'
			}).then(({ value }) => {
				const [name, description] = value.split(',');
				this.$api.createChatRoom({ name, description }).then(() => {
					this.getChatRooms(); // 重新获取聊天室列表
				});
			}).catch(() => { });
		},
		createAIChat() {
			// 创建与AI的对话
			this.$api.createChatRoom({ name: 'AI对话', description: '与AI的私人对话' }).then(() => {
				this.getChatRooms(); // 重新获取聊天室列表
			});
		}
	}
};
</script>

<style scoped>
.el-dropdown {
	margin-right: 20px;
}

.el-button {
	margin-right: 20px;
}

.el-dropdown-item {
	width: 200px;
}
</style>